"use client"
import useRequireAuth from '@/hooks/useRequireAuth'
import styles from './userPage.module.scss'
import {useState, useEffect} from 'react'
import { Avatar, Button } from 'antd-mobile'
import {signOut} from 'next-auth/react'
import { useSession } from 'next-auth/react';
export default function(){
  useRequireAuth()
  const {data} = useSession()
  const {user} = data ?? {}
  const [userInfo, setUserInfo] = useState({
    id:'',
    email:''
  })
  useEffect(()=>{
    user && setUserInfo(user)
  },[user])

  const handleLogout = async () => {
    await signOut({ callbackUrl: '/login' })
  }
  return <div>
    <div className={styles.userPage}>
      <section className={styles.userSec}>
        <Avatar src='/minions.jpeg' style={{ '--size': '128px' }} />
        <span>{ userInfo.email }</span>
      </section>
      <Button block color='danger' size='middle' fill='outline' onClick={handleLogout}> 退出登录 </Button>
    </div>
  </div>
}